Normal Flow Quiz

intro to quiz

For this quiz, I'm giving you some HTML and I want you to predict the resulting website. Once you've made your prediction, confirm your guess by rendering this HTML in your own browser!

Here is the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Normal Flow Quiz</title>
  <style>
    * {
      box-sizing: border-box;
      font-family: 'Source Sans Pro', sans-serif;
      font-weight: bold;
    }
    span, div {
      border: 2px solid #2e3d49;
    }
    .blue {
      background-color: #02b3e4;
    }
  </style>
  <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
</head>
<body>
  <div class="blue">
    <span>HTML, </span>
    <div>CSS </div>
    <span>and </span>
    <span>JavaScript </span>
    <div>are the programming languages</div>
    <div> of the web.</div>
  </div>
</body>
</html>

And here are the outcomes:

Option A

Option B

Option C

Option D

Normal Flow Quiz

SOLUTION:

D